<div class="row" id="title">
  <!-- <div class="col-sm">
    <h1 translate lib="web">auditlogs</h1>
  </div> -->
  <div class="col-sm"></div>
  <div class="col-sm text-right">
    <em class="fas fa-cog fa-spin" ng-show="ctrl.loading==true" title="Hang on, loading data"></em>
    <!-- <em class="fas fa-cog" ng-show="ctrl.loading!=true" title="I spin, while loading data"></em> -->
  </div>
</div>

<style>
  .failed {
    border-color: red !important;
    border: width 1;
    border-style: solid
  }
</style>

<div class="col-md-10 text-right">
  <em class="fas fa-cog fa-spin" ng-show="ctrl.loading==true" title="Hang on, loading data"></em>
  <!-- <em class="fas fa-cog" ng-show="ctrl.loading!=true" title="I spin, while loading data"></em> -->
  <!-- <a class="btn" href ng-click="ctrl.loadData()" title="Reload current data">
    <span translate lib="web">reload</span>
  </a> -->
  <a class="btn" href ng-click="ctrl.ToogleType('jwtsignin'); " ng-class="{'btn-primary': ctrl.basequery['type'] == 'jwtsignin'}"
    title="jwt signin">
    <span translate lib="web">jwt signin</span>
  </a>
  <a class="btn" href ng-click="ctrl.ToogleType('impersonate')" ng-class="{'btn-primary': ctrl.basequery['type'] == 'impersonate'}"
    title="impersonate">
    <span translate lib="web">impersonate</span>
  </a>
  <a class="btn" href ng-click="ctrl.ToogleType('assignplan')" ng-class="{'btn-primary': ctrl.basequery['type'] == 'assignplan'}"
    title="assignplan">
    <span translate lib="web">assignplan</span>
  </a>
  <a class="btn" href ng-click="ctrl.ToogleType('unassignplan')" ng-class="{'btn-primary': ctrl.basequery['type'] == 'unassignplan'}"
    title="unassignplan">
    <span translate lib="web">unassignplan</span>
  </a>
  <a class="btn" href ng-click="ctrl.ToogleType('ensureagent')" ng-class="{'btn-primary': ctrl.basequery['type'] == 'ensureagent'}"
    title="ensureagent">
    <span translate lib="web">ensureagent</span>
  </a>
  <a class="btn" href ng-click="ctrl.ToogleType('killagent')" ng-class="{'btn-primary': ctrl.basequery['type'] == 'killagent'}"
    title="killagent">
    <span translate lib="web">killagent</span>
  </a>
  <a class="btn" href ng-click="ctrl.ToogleType('removeagent')" ng-class="{'btn-primary': ctrl.basequery['type'] == 'removeagent'}"
    title="removeagent">
    <span translate lib="web">removeagent</span>
  </a>
  <a class="btn" href ng-click="ctrl.ToogleType('issue')" ng-class="{'btn-primary': ctrl.basequery['type'] == 'issue'}"
    title="Issue">
    <span translate lib="web">Issue</span>
  </a>
  <a class="btn" href ng-click="ctrl.ToogleType()"
  title="clear filters and show all status and Workitem queues">
  <span translate lib="web">all</span>
</a>

</div>
<div ng-show="ctrl.errormessage != ''"" class=" alert alert-danger" role="alert">{{ctrl.errormessage}}
</div>
<table id="table1" class="table table-striped" when-scrolled="ctrl.more()" style="width: 100%;">
  <thead class="thead-dark">
    <tr>
      <th></th>
      <th ng-click="ctrl.ToggleOrder('name')"><strong translate lib="web">name</strong></th>
      <th ng-click="ctrl.ToggleOrder('type')"><strong translate lib="web">type</strong></th>
      <th ng-click="ctrl.ToggleOrder('impostorname')"><strong translate lib="web">impostorname</strong></th>
      <th ng-click="ctrl.ToggleOrder('clientagent')"><strong translate lib="web">clientagent</strong></th>
      <th ng-click="ctrl.ToggleOrder('clientversion')"><strong translate lib="web">clientversion</strong></th>
      <th ng-click="ctrl.ToggleOrder('remoteip')"><strong translate lib="web">ipaddress</strong></th>
      <th scope="col" ng-click="ctrl.ToggleOrder('_created')"><strong translate lib="web">created</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="model in ctrl.models" ng-class="{failed: model.success == false}">
      <td>
        <i ng-class="model.fa">
          <i ng-class="model.fa2">
      </td>
      <td><a href ng-click="ctrl.ShowAudit(model)" class="btn">{{ (model.name || model.username || "unknown") | limitTo: 30 }}</a></td>
      <td>{{model.type}}</td>
      <td>{{model.impostorname | limitTo: 25 }}</td>
      <td>{{model.clientagent || model.imagename}}</td>
      <td>{{model.clientversion || model.imageversion}}</td>
      <td><a ng-href="https://www.iplocation.net/?query={{model.remoteip}}" target="_blank">{{model.remoteip}}</a></td>
      <td>
        <timesince ng-model="model._created" />
      </td>
    </tr>
  </tbody>
</table>



<!-- First comes the modal -->
<div class="modal" id="exampleModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <a href="#" class="close" role="button" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </a>
      <h5 class="modal-title">{{ctrl.model.name}}</h5>
      <p>
      <table>
        <tr>
          <td>success</td>
          <td>{{ctrl.model.success}}</td>
        </tr>
        <tr>
          <td>type</td>
          <td>{{ctrl.model.type}}</td>
        </tr>
        <tr ng-show="ctrl.model.provider">
          <td>provider</td>
          <td>{{ctrl.model.provider}}</td>
        </tr>
        <tr ng-show="ctrl.model.type=='assignplan' || ctrl.model.type=='unassignplan'">
          <td>name</td>
          <td>{{ctrl.model.name}}</td>
        </tr>
        <tr>
          <td>userid</td>
          <td>{{ctrl.model.userid}}</td>
        </tr>
        <tr>
          <td>username</td>
          <td>{{ctrl.model.username}}</td>
        </tr>
        <tr>
          <td>remoteip</td>
          <td>{{ctrl.model.remoteip}}</td>
        </tr>
        <tr>
          <td>impostoruserid</td>
          <td>{{ctrl.model.impostoruserid}}</td>
        </tr>
        <tr>
          <td>impostorname</td>
          <td>{{ctrl.model.impostorname}}</td>
        </tr>
        <tr>
          <td>impostorusername</td>
          <td>{{ctrl.model.impostorusername}}</td>
        </tr>
        <tr>
          <td>clientagent</td>
          <td>{{ctrl.model.clientagent}}</td>
        </tr>
        <tr>
          <td>clientversion</td>
          <td>{{ctrl.model.clientversion}}</td>
        </tr>
      </table>

      </p>
      <div class="text-right mt-20">
        <!-- text-right = text-align: right, mt-20 = margin-top: 2rem (20px) -->
        <a href class="btn mr-5" role="button" ng-click="ctrl.ToggleModal()">Close</a>
      </div>
    </div>
  </div>
</div>